<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Low latency live stream instantiation example</title>

    <script src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->

    <script class="code">
        var player, targetLatency, minDrift, catchupPlaybackRate, liveCatchupLatencyThreshold;

        function init() {
            var video,
                url = "https://vm2.dashif.org/livesim-chunked/chunkdur_1/ato_7/testpic4_8s/Manifest300.mpd";

            video = document.querySelector("video");
            player = dashjs.MediaPlayer().create();
            player.initialize(video, url, true);
            player.updateSettings({'streaming': {'lowLatencyEnabled': true}});

            applyParameters();

            return player;
        }

        function applyParameters() {
            targetLatency = parseFloat(document.getElementById("target-latency").value, 10);
            minDrift = parseFloat(document.getElementById("min-drift").value, 10);
            catchupPlaybackRate = parseFloat(document.getElementById("catchup-playback-rate").value, 10);
            liveCatchupLatencyThreshold = parseFloat(document.getElementById("catchup-threshold").value, 10);

            player.updateSettings({
                'streaming': {
                    'liveDelay': targetLatency,
                    'liveCatchUpMinDrift': minDrift,
                    'liveCatchUpPlaybackRate': catchupPlaybackRate,
                    "liveCatchupLatencyThreshold": liveCatchupLatencyThreshold,
                }
            });
        }
    </script>

    <style>
        .video-wrapper {
            display: flex;
            flex-flow: row wrap;
        }

        .video-wrapper > div:nth-child(2) {
            margin-left: 25px;
        }

        video {
            width: 640px;
            height: 360px;
        }

        ul {
            margin: 0;
        }

        input {
            width: 5em;
            border: 1px solid gray;
            padding: 0 4px 0 8px;
        }

        .help-container {
            display: flex;
            flex-flow: row wrap;
            margin-top: 1em;
            align-content: center;
            background: white;
            border: solid 1px #ddd;
            padding: 0.5em;
        }

        .help-container > div {
            width: 25.0%;
            padding: 1em;
            box-sizing: border-box;
        }

        .help-container h3 {
            margin-top: 0;
        }
    </style>
</head>
<body>
<div>
    <div class="video-wrapper">
        <video controls="true"></video>
        <div>
            <div>
                <form action="javascript:applyParameters()">
                    <fieldset>
                        <legend>Configurable parameters</legend>
                        <p>Target Latency (secs): <input type="number" id="target-latency" value="3" min="0"></p>
                        <p>Min. drift (secs): <input type="number" id="min-drift" value="0.05" min="0.0" max="0.5"
                                                     step="0.01"></p>
                        <p>Catch-up playback rate (%): <input type="number" id="catchup-playback-rate" value="0.5"
                                                              min="0.0" max="0.5" step="0.01"></p>
                        <p>Live catchup latency threshold (secs): <input type="number" id="catchup-threshold" value="30">
                        </p>
                        <button type="submit">Apply</button>
                    </fieldset>
                </form>
            </div>
            <br>
            <fieldset>
                <legend>Current values</legend>
                <ul>
                    <li>Latency: <span id="latency-tag"></span></li>
                    <li>Min. drift: <span id="mindrift-tag"></span></li>
                    <li>Playback rate: <span id="playbackrate-tag"></span></li>
                    <li>Live catchup latency threshold : <span id="catchup-threshold-tag"></span></li>
                    <li>Buffer: <b><span id="buffer-tag"></span></b></li>
                </ul>
            </fieldset>
        </div>
    </div>

    <p style="font-family:Arial,sans-serif; font-weight: bold; font-size: 1.1em">Concepts definition</p>
    <div class="help-container">
        <div id="latency-help">
            <h3>Latency</h3>
            <p>Lowering this value will lower latency but may decrease the player's ability to build a stable
                buffer.</p>
            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
                  target="_blank">setLiveDelay() doc</a></p>
        </div>

        <div id="min-drift-help">
            <h3>Min. drift</h3>
            <p>Minimum latency deviation allowed before activating catch-up mechanism.</p>
            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
                  target="_blank">setLowLatencyMinDrift() doc</a></p>
        </div>

        <div id="catch-up-playback-rate-help">
            <h3>Catch-up playback rate</h3>
            <p>Maximum catch-up rate, as a percentage, for low latency live streams.</p>
            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
                  target="_blank">setCatchUpPlaybackRate() doc</a></p>
        </div>
        <div id="catch-up-playback-threshold-help">
            <h3>Live catchup latency threshold</h3>
            <p> Use this parameter to set the maximum threshold for which live catch up is applied. For instance, if
                this value is set to 8 seconds, then live catchup is only applied if the current live latency is equal
                or below 8 seconds. The reason behind this parameter is to avoid an increase of the playback rate if the
                user seeks within the DVR window.</p>
            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
                  target="_blank">setCatchUpPlaybackRate() doc</a></p>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var player = init();

        setInterval(function () {
            var dashMetrics = player.getDashMetrics();
            var settings = player.getSettings();

            var currentLatency = parseFloat(player.getCurrentLiveLatency(), 10);
            document.getElementById("latency-tag").innerHTML = currentLatency + " secs";

            document.getElementById("mindrift-tag").innerHTML = settings.streaming.liveCatchUpMinDrift + " secs";

            var currentPlaybackRate = player.getPlaybackRate();
            document.getElementById("playbackrate-tag").innerHTML = Math.round(currentPlaybackRate * 100) / 100;

            var currentBuffer = dashMetrics.getCurrentBufferLevel("video");
            document.getElementById("buffer-tag").innerHTML = currentBuffer + " secs";
            
            document.getElementById("catchup-threshold-tag").innerHTML = settings.streaming.liveCatchupLatencyThreshold + " secs";
            
        }, 200);
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>


